import React, { ReactNode } from 'react';
import { Table, Button } from 'antd';
import { connect } from 'dva';
import { columns } from './tableColumn';
import { ObjectType } from '../../../utils';
import style from './table.less';

interface StateType {
  pageSize: number;
  current: number;
}

class FinanceAdjustmentInquiryTable extends React.PureComponent<ObjectType, StateType> {
  public state = {
    pageSize: 10, // 一页默认展示表格行数
    current: 1, // 当前页码
  };

  public timer: number | undefined;

  /*
   * 表格列渲染数据拼接上操作列，主要是为了绑定操作列的事件
   * columns：Array 除了操作列外表格的列标题渲染信息
   * 返回值：Array 表格的列标题渲染信息
   * */
  plusOptionColumn = () => {
    // @ts-ignore
    const cols: ObjectType[] = [].concat(columns);
    const optionColumn = {
      title: '操作',
      dataIndex: 'option',
      key: 'option',
      width: 150,
      fixed: 'left',
      render: (text: string, record: ObjectType) => {
        // 状态：-1全部，0待审核，1一审通过，2一审未通过，3二审通过，4二审未通过 5搁置 int
        const { status } = record;
        let buttonText = '查看';
        if (status === 1 || status === 5) buttonText = '审核';
        return (
          <Button
            onClick={() => this.props.toDetailPage(record)}
            className={buttonText === '查看' ? style.lookOver : style.examine}
          >
            {buttonText}
          </Button>
        );
      },
    };
    cols.unshift(optionColumn);

    // @ts-ignore
    this.timer = setTimeout(() => {
      this.props.dispatch({
        type: 'financeAdjustmentExamine/setUserListColumns',
        payload: cols,
      });
      clearTimeout(this.timer);
    }, 500);

    return cols;
  };

  handleTableChange = (pagination: ObjectType) => {
    const { current, pageSize } = pagination;
    const { formData } = this.props.financeAdjustmentExamine;
    this.setState({
      current,
      pageSize,
    });
    this.handleGetUserList({ ...formData.inquiryCondition, page: current, size: pageSize });
    this.props.dispatch({
      type: 'financeAdjustmentExamine/setPageSize',
      payload: {
        pageSize,
        currentPage: current,
      },
    });
  };

  // 翻页查询查询用户风险名单
  handleGetUserList = (inquiryCondition: ObjectType) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'financeAdjustmentExamine/getUserRiskDataEffect',
      payload: inquiryCondition,
    });
  };

  public render(): ReactNode {
    let { pageSize, current } = this.state;
    const {
      financeAdjustmentExamine: {
        tableData: { userList, total, pageSize: currenPageSize, currentPage },
      },
    } = this.props;
    pageSize = pageSize === currenPageSize ? pageSize : currenPageSize;
    current = current === currentPage ? current : currentPage;
    return (
      <Table
        columns={this.plusOptionColumn()}
        dataSource={userList}
        rowKey={(record: ObjectType) => record.id}
        className={style.mainTable}
        onChange={this.handleTableChange}
        bordered
        pagination={{
          total,
          pageSize,
          current,
          pageSizeOptions: ['10', '20', '50', '200', '500'],
          // onChange: this.onPaginationChange,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: () => `共 ${total}条记录 第 ${current} / ${Math.ceil(total / pageSize)}`,
        }}
        scroll={{ x: 3100, y: 800 }}
      />
    );
  }
}

function mapStateToProps({ financeAdjustmentExamine }: { financeAdjustmentExamine: ObjectType }) {
  return { financeAdjustmentExamine };
}

export default connect(mapStateToProps)(FinanceAdjustmentInquiryTable);
